import React, { useState, useEffect } from 'react'
import SetTting from '../customerTop/CustomerTop';
import MyTable from './../MyTable/MyTable';
import CustomerBottom from './../customerBottom/CustomerBottom';
import CustomerDetails from './../customerDetails/CustomerDetails';
import ModifyCustomer from './../modifyCustomer/ModifyCustomer';
import DelateCustomer from './../delateCustomer/DelateCustomer';
import { message, Space, Button, Modal } from 'antd';
import { MessageOutlined, DeleteOutlined, EditOutlined, SmileTwoTone } from '@ant-design/icons';
import { AsyncTableDataAction } from '../../../redux/action/customerAction/tableData';
import store from '../../../redux/store';
import moment from 'moment';
import myAxios from '../../../utils/myAxios';
export default function CustomerList() {
  const [isModalDetail, setisModalDetail] = useState(false);
  const [isShowModify, setisShowModify] = useState(false);
  const [isShowDeleta, setisShowDeleta] = useState(false);
  const [userInfo, setuserInfo] = useState([]);
  const initcolumns = [
    {
      title: '客户名称',
      dataIndex: 'name',
      render: (name, item) => <a onClick={() => {
        setisModalDetail(true)
        /* console.log(name); //被点击的客户名字
        console.log(item);//被点击的客户的所有的信息 */
        /* 拿到当前这一行的客户数据，并保存起来。然后props传给客户详情页的模态框组件做展示 */
        setuserInfo(item)
      }}>{name}</a>,
    },
    {
      title: '联系人',
      dataIndex: 'Contact',
    },
    {
      title: '职位',
      dataIndex: 'jobType',

    },
    {
      title: '手机号码',
      dataIndex: 'phone',

    },
    {
      title: 'QQ',
      dataIndex: 'qqNumber',

    },
    {
      title: '客户类型',
      dataIndex: 'customerType',

    },
    {
      title: '客户级别',
      dataIndex: 'customerLevel',

    },
    {
      title: '客户来源',
      dataIndex: 'source',

    },
    {
      title: '录入时间',
      dataIndex: 'time',

    },
    {
      title: '电子邮箱',
      dataIndex: 'email',
    },

    {
      title: '业务员',
      dataIndex: 'employee',

    },
    {
      title: '管理',
      // dataIndex: 'Contact',
      render: (item) => {
        return <Space size="small" >
          <Button style={{ backgroundColor: '#469F8E', color: 'white' }} size="small" icon={< MessageOutlined />}
            onClick={() => info()}
          > 短信 </Button >

          <Button style={{ backgroundColor: '#488DC9', color: 'white' }} size="small" icon={<EditOutlined />}
            onClick={() => {
              // console.log(item)
              setisModalDetail(true)
              setuserInfo(item)
            }}
          >
            修改</Button>
          <Button style={{ backgroundColor: '#FF4D4F', color: 'white' }} size="small" icon={<DeleteOutlined />}
            onClick={() => {
              setisShowDeleta(true)
              setuserInfo([item])
            }
            }
          >删除</Button>
        </Space >
      }
    },

  ]
  const [columns, setcolumns] = useState(initcolumns);
  const [data, setdata] = useState([]);

  function cancelModify() {
    setisShowModify(false)
  }
  function cancelDeleta() {
    setisShowDeleta(false)
  }
  const handleCancel = () => {
    setisModalDetail(false);
  };
  const info = () => {
    message.info({
      content: '敬请期待~',
      icon: <SmileTwoTone />
    });
  };
  useEffect(() => {
    //请求table数据异步action
    store.dispatch(AsyncTableDataAction(1, 7,0, 0, 1, '',0))

    let fn = store.subscribe(() => {
      setdata(store.getState().customerReducer.tableData)
    })
    return () => {
      fn()
    }
  }, [])
  return (
    <div style={{ minWidth: '1250px' }}>

      <SetTting />
      {/* <CustomerStatus /> */}
      <MyTable data={data} columns={columns} />
      <CustomerBottom />

      {/* 客户详情 */}
      <Modal
        destroyOnClose={true}
        bodyStyle={{ height: '500px', overflowY: 'scroll' }}
        width={800} className='my-modal' title="客户名字" visible={isModalDetail} footer={[]} onCancel={handleCancel}  >

        <CustomerDetails userInfo={userInfo} setisModalDetail={setisModalDetail} />

        {/* 修改客户的模态框 */}
        <Modal title='修改' visible={isShowModify} onCancel={cancelModify}
          width={600}
          bodyStyle={{ height: 520, overflowY: 'scroll' }}
          footer={[]}
        >
          <ModifyCustomer setisShowModify={setisShowModify} />
        </Modal>
      </Modal>

      {/* 删除客户的模态框 */}
      <Modal visible={isShowDeleta} onCancel={cancelDeleta}
        width={500}
        footer={[]}
      >
        <DelateCustomer
          userInfo={userInfo}
          setisShowDeleta={setisShowDeleta}
        />
      </Modal>
    </div>
  )
}
